<template>
<el-dialog
    title="查看视频"
    :close-on-click-modal="false"
    :visible.sync="visible">

 <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="(item,index) in videolist" :key="index">
        <div class="mui-media-body">
          <p class="mui-ellipsis">
            <span>外挂描述：{{ item.waiguaDescribe }}</span>
            <span>上传时间：{{item.createTime | format}}</span>
          </p>
        </div>
        <h1>
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions[index]"
           
          ></video-player>
        </h1>
      </li>
    </ul>
  </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="pauseVideo()">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import VideoPlayer from "./videoPlayer.vue";

export default {
    components: {
        VideoPlayer
    },
    data() {
        return {
          visible: false,
          videolist: [],
      videolist1: [],
      playsinline: true,
      playerOptions: [],
      options: "",
        };
    },
    filters:{
            /**
             *格式化时间文本
             * @param {Date} time 时间
             * @param {String} format 文本格式
             *  Y 表示年份
             *  M 表示月份
             *  D 表示某日
             *  h 表示小时
             *  m 表示分
             *  s 表示秒
             *  w 表示星期几
             */
            format(time, format = 'YYYY-MM-DD HH:mm:ss') {
                let date = new Date(time)
                let o = {
                    'M+': date.getMonth() + 1,
                    'D+': date.getDate(),
                    'H+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds(),
                    'w': '日一二三四五六'.charAt(date.getDay())
                };

                format = format.replace(/Y{4}/, date.getFullYear()).replace(/Y{2}/, date.getFullYear().toString().substring(2));

                let k, reg
                for (k in o) {
                    reg = new RegExp(k);
                    /* eslint no-use-before-define:0 */
                    format = format.replace(reg, match);
                }
                function match(m) {
                    return m.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length);
                }

                return format;
            }
    },
    mounted(){
      // this.getMovieList()
    },
    methods: {
      init (id) {
        this.visible = true;
        this.$nextTick(() => {
          if (id) {
            this.$http({
              url: this.$http.adornUrl(`/waiguagg/info/videoList/`+id),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              console.log(data)
              if (data && data.code === 0) {
                  this.playerOptions=[];
                  this.videolist = data.videolist
                  this.getMovieList()

                  //切换视频源
                   let myPlayer = this.$refs.videoPlayer;
                   if(myPlayer!=null&&myPlayer!=''){
                   myPlayer[0].player.src(this.videolist[0].movie);             
                   }
              }
            })
          }
        })
      },
      getMovieList() {
    // 这里正常来说应该是从后台获取的数据，以下操作都是在成功的回调函数里
      for (var i = 0; i < this.videolist.length; i++) {
          let arrs = {
             autoplay: false,    //'muted',//自动播放
            controls: true,//用户可以与之交互的控件
            loop:false,//视频一结束就重新开始
            muted:false,//默认情况下将使所有音频静音
            aspectRatio:"16:9",//显示比率
            //设置视频播放器的显示宽度（以像素为单位）
            width:  "400px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "200px",
            playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
            fullscreen:{
                options: {navigationUI: 'hide'}
            },
            sources: [
              {
                type: "video/mp4",
              //  type: "video/ogg",
                src: this.videolist[i].movie //url地址
              }
            ],
            poster: "", //封面地址
            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          };
          this.playerOptions.push(arrs);
        }
    },
    onPlayerPlay(player, index) {
       var that = this.$refs.videoPlayer;
       for (let i = 0; i < that.length; i++) {
          if(i != index)
          that[i].player.pause()
       }
    },
    onPlayerPause(player) {
      
    },
    pauseVideo(){//关闭窗口则暂停正在播放的视频
      this.visible = false
       var that = this.$refs.videoPlayer;
       if(that!=null&&that!=''){
      for (let i = 0; i < that.length; i++) {
          that[i].player.pause()
        //  that[i].player.dispose()
       }
       }
    }
    }
}

</script>
<style lang="scss" scoped>
.mui-table-view {
  h1 {
    font-size: 14px;
    line-height: 24px;
    text-indent: 2em;
  }
  .mui-ellipsis {
    font-size: 14px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
  }
  video {
    width: 100%;
    height: 300px;
  }
}
</style>
